<!--
 * @Author: AT-bear 1509109728@qq.com
 * @Date: 2024-07-06 09:37:13
 * @LastEditors: AT-bear 1509109728@qq.com
 * @LastEditTime: 2024-07-06 17:57:21
 * @FilePath: \nk-jewelc:\Users\Administrator\Desktop\case\Front-end-Three-Musketeers-Case\case\-vue\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
</script>
<template>
  <div id="container">
    <header>
      <h1 class="neon">AT-bear</h1>
    </header>
    <main>
      <section class="content">
        <h2>Welcome to the Neon Home of AT-bear</h2>
            <p class="typing">This is your gateway to advancement. Explore my home page, meet its wonderful, and uncover its secrets.</p>
            <div class="button-container">

            </div>

      </section>
    </main>
    <footer>&copy; 2023 AT-bear. All rights reserved.</footer>
  </div>
</template>

<style scoped>
#container{
    background-color: #000;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}
header {
    background-color: #222;
    padding: 20px;
    text-align: center;
    box-shadow:  0 0 10px #000;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.5);

}
footer {
    background-color: #222;
    padding: 20px;
    text-align: center;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.5);

}
header .neon{
  text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff;
  animation: neon_blink 1s ease-in-out infinite;
}
@keyframes neon_blink {
  0%{opacity: 1;}
  50%{opacity: 0.5;}
  100%{opacity: 1;}
}
.content {
    padding: 50px;
    text-align: center;
    width: 100vw;

}
.content .typing{
  overflow: hidden;
  animation: typing 10s steps(50, end) infinite alternate,blink-caret 1s steps(1,end) infinite;
  white-space: nowrap;
  margin: 0 auto;
}



@keyframes typing{
  from{
    width: 0;
  }
  to{
    width: 100vw;
  }
}
@keyframes blink-caret{
  from,to{border-right:transparent}
  50%{
    border-right: 2px solid #00ffff;
  }
} 
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* .content{
  margin:auto;
  display: flex;
  width: 100vw;
  justify-content: space-around;
}
#button{
  height: 40px;
  width: 100px;
  background:linear-gradient(0deg, #4a235a 0%, #9b59b6 35%, #c06c84 65%, #f67280 100%);
}
#button1{
  height: 40px;
  width: 100px;
  background:linear-gradient(0deg, #ADD8E6 0%, #87CEFA 30%, #4682B4 60%, #9400D3 100%);
}
#button2{
  height: 40px;
  width: 100px;
  background:linear-gradient(0deg,#4682B4  0%,#87CEEB  50%, #9400D3 100%);
}
#button3{
  height: 40px;
  width: 100px;
  background:linear-gradient(0deg, #4B0082 0%, #00FFFF 50%, #32CD32 100%);
} */
</style>
